<template>
	<view>
		<!-- 轮播图 -->
		<u-swiper :list="imgList" keyName="img_url" height="180" indicator indicatorMode="line" showTitle
			:autoplay="true" circular>
		</u-swiper>
		<!-- tabs -->
		<view class="u-text-center">
			<u-tabs :list="sortList" lineWidth="40" itemStyle='width:70px;height:35px' :current='currentSort'
				@change="changeSort"></u-tabs>
		</view>
		<!-- 商品 -->
		<goods-cart :goods="goods" :loading="loading"></goods-cart>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgList: [], //轮播图
				sortList: [{
					name: '默认'
				}, {
					name: '销量'
				}, {
					name: '推荐'
				}, {
					name: '最新'
				}], //排序
				goods: [], //商品
				currentSort: 0,
				page: 1,
				loading: false
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			//获取首页数据
			async getData() {
				this.loading = true
				const params = {
					page: this.page,
				}
				if (this.currentSort == 1) params.sales = 1
				if (this.currentSort == 2) params.recommend = 1
				if (this.currentSort == 3) params.new = 1
				let res = await this.$u.api.getHome(params)
				this.loading = false
				this.imgList = res.slides
				this.goods = this.goods.concat(res.goods.data)
			},
			//点击tabs标签
			changeSort({
				index
			}) {
				this.currentSort = index
				//重置商品数据
				this.goods = []
				this.page = 1
				//筛选条件
				this.getData()
			},

		}, 
		//加载更多 声明周期函数
		onReachBottom() {
			this.page += 1
			this.getData()
		}
	}
</script>

<style lang="scss" scoped>

</style>
